<template>
<div>
  <div class="table-data">
    
    <el-table 
      v-loading="loading"
      element-loading-text="正在加载"
      element-loading-spinner="el-icon-loading" :data="tableData" :header-cell-style="headClass"  style="width:100%" :height="tHeight" class="table-box">
      <el-table-column label="id" prop="id" width="80"></el-table-column>
      <el-table-column label="申请人" prop="apply_name" width="120px"></el-table-column>
      <el-table-column label="类型" prop="type_txt" width="80px"></el-table-column>
      <el-table-column label="开票抬头" prop="in_title" width="180px"></el-table-column>
      <el-table-column label="纳税人号" prop="in_tax"></el-table-column>
      <el-table-column label="申请金额" prop="amount" width="80px"></el-table-column>
      <el-table-column label="发票类型" prop="in_type_txt" width="80px"></el-table-column>
      <el-table-column label="物流方式" prop="postal_type_txt" width="80px"></el-table-column>
      <el-table-column label="对接人信息" width="180">
        <template slot-scope="scope">
          <p v-if="scope.row.c_username">{{scope.row.c_username}}:{{scope.row.c_mobile}}</p>
          <p v-if="scope.row.express_json.company">{{scope.row.express_json.company}}:{{scope.row.express_json.express_no}}</p>
        </template>
      </el-table-column>
      <el-table-column label="开票备注" prop="c_remark"></el-table-column>
      <el-table-column label="状态" prop="status_txt" width="80px"></el-table-column>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <button class="butt-min" @click="handleDetail(scope.row)">详情</button>
          -
          <button class="butt-min" @click="bind(scope.row.id)">关联结算</button>
          <i v-if="scope.row.status === 0 && manage.type === 'admin'">-</i>
          <button v-if="scope.row.status === 0 && manage.type === 'admin'" class="butt" @click="handleApply(scope.row)"> 审核</button>
          <i v-if="scope.row.postal_type === 2 && (scope.row.status === 1 || scope.row.status === 2) && scope.row.express_json.company === '' &&  manage.type === 'admin'" >-</i>
          <button v-if="scope.row.postal_type === 2 && (scope.row.status === 1 || scope.row.status === 2) && scope.row.express_json.company === '' &&  manage.type === 'admin'" class="butt-min" @click="handleShipping(scope.row.id)">快递编辑</button>
          <button v-if="(scope.row.status === 2 && scope.row.express_json.company !== '' && scope.row.postal_type === 2) || (scope.row.status === 2 && scope.row.postal_type === 1)" class="butt-min" @click="confirmInvoice(scope.row.id)">确认收票</button>
          <i v-if="scope.row.status === 1 && manage.type === 'admin'">-</i>
          <button v-if="scope.row.status === 1 && manage.type === 'admin'" class="butt" @click="makeInvoice(scope.row)">确认开票</button>
          
        </template>
      </el-table-column>
    </el-table>
    <div class="pages" ref="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,30,50]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog
      title="关联的结算"
      :visible.sync="dialogVisible"
      width="60%">
          <el-table 
            :data="bindData"  style="width:100%" class="table-box">
          <el-table-column label="id" prop="settle_sn" ></el-table-column>
          <el-table-column label="结算方" prop="apply_name" ></el-table-column>
          <el-table-column label="类型" prop="type"></el-table-column>
          <el-table-column label="金额" prop="amount" ></el-table-column>
          <el-table-column label="时间" prop="created_at"></el-table-column>
        </el-table>
    </el-dialog>

    <el-dialog title="申请详情" :visible.sync="dialogDetailVisible" width="30%">
        <div class="table-data">
      <div class="user-info-item">
        <span>序号：</span>
        <span>{{form.id}}</span>
      </div>
      <div class="user-info-item">
        <span>申请开票金额：</span>
        <span>{{form.amount}}</span>
      </div>
      <div class="user-info-item">
        <span>平台审核时间：</span>
        <span>{{form.pass_at}}</span>
      </div>
      <div class="user-info-item">
        <span>审核人：</span>
        <span>{{form.admin_id ? (form.manage.real_name ? form.manage.real_name :  form.manage.username) : ''}}</span>
      </div>
      <div class="user-info-item">
        <span>审核意见：</span>
        <span>{{form.status_txt}}</span>
      </div>
      <div class="user-info-item">
        <span>审核备注：</span>
        <span>{{form.apply_remark}}</span>
      </div>
       <div class="user-info-item">
        <span>金额：</span>
        <span>{{form.amount}}</span>
      </div>
      <div class="user-info-item">
        <span>发票类型：</span>
        <span>{{form.in_type_txt}}</span>
      </div>
      <div class="user-info-item">
        <span>发票抬头：</span>
        <span>{{form.in_title}}</span>
      </div>
      <div class="user-info-item">
        <span>纳税人识别号：</span>
        <span>{{form.in_tax}}</span>
      </div>
      <div class="user-info-item">
        <span>电话：</span>
        <span>{{form.c_mobile}}</span>
      </div>
      <div class="user-info-item">
        <span>邮箱：</span>
        <span>{{form.c_email}}</span>
      </div>
      <div class="user-info-item">
        <span>地址：</span>
        <span>{{form.c_address}}</span>
      </div>

      <div class="user-info-item">
        <span>收件人姓名：</span>
        <span>{{form.c_username}}</span>
      </div>
      <div class="user-info-item">
        <span>收件人电话：</span>
        <span>{{form.c_mobile}}</span>
      </div>
      <div class="user-info-item">
        <span>快递：</span>
        <span>{{form.express_json  ? (form.express_json.company + " " + form.express_json.express_no) : ''}}</span>
      </div>
    </div>
    </el-dialog>

    <el-dialog title="审核"
      :visible.sync="dialogApplyVisible"
      width="20%">
      <div class="table-data">
        <div class="user-info-item">
          <span>发票类型:</span>
          <span>{{apply.in_type_txt}}</span>
        </div>
        <div class="user-info-item">
          <span>发票抬头:</span>
          <span>{{apply.in_title}}</span>
        </div>
        <div class="user-info-item">
          <span>纳税人识别号:</span>
          <span>{{apply.in_tax}}</span>
        </div>
        <div class="user-info-item">
          <span>电话:</span>
          <span>{{apply.c_mobile}}</span>
        </div>
        <div class="user-info-item">
          <span>邮箱:</span>
          <span>{{apply.c_email}}</span>
        </div>
        <div class="user-info-item">
          <span>地址:</span>
          <span>{{apply.c_address}}</span>
        </div>
        <el-form  label-width="118px">
          <el-form-item label="审核结果：" >
              <el-radio-group v-model="applyResult.status">
                  <el-radio :label="1">通过</el-radio>
                  <el-radio :label="5">拒绝</el-radio>
              </el-radio-group>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input  v-model="applyResult.remark"></el-input>
          </el-form-item>
        </el-form>
        <div class="but">
          <el-button type="primary" size="small" @click="handleSubmit()">确定</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog title="快递编辑"
      :visible.sync="dialogShippingVisible"
      width="30%">
      <div class="table-data">
  
        <el-form>
        
          <el-form-item label="快递公司：" label-width="100px">
            <el-input width="300px" v-model="express.company"></el-input>
          </el-form-item>
          <el-form-item label="快递单号：" label-width="100px">
            <el-input width="300px" v-model="express.express_no"></el-input>
          </el-form-item>

          <el-form-item label-width="170px">
            <el-button type="primary" size="small" @click="handleExpressSubmit()">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">

import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
// import { State, Getter, Mutation, Action } from "vuex-class";
import invoiceApi from "@/api/invoice";

@Component({
  components: { }
})
export default class invoiceApplyList extends Vue {
  // @Getter("user") getUser: any;
  @Provide() dateTime: any = ["",""]; // 时间
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() tableData: any = []; // 表格数据
  @Provide() multipleTable: any = []; // 表格数据
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() bindData: any = [];
  @Provide() advertisers: any = [];
  @Provide() manage: any = {};
  @Provide() form: any = {};
  @Provide() apply: any = {};
  @Provide() applyResult: any = {
    remark:'',
    status:''
  };
  @Provide() express: any = {
    company:'',
    express_no:'',
    id:'',
  }
  @Provide() dialogVisible: Boolean = false;
  @Provide() dialogDetailVisible: Boolean = false;
  @Provide() dialogApplyVisible:  Boolean = false;
  @Provide() dialogShippingVisible: Boolean = false;
  @Provide() searchData: any = {
    pageNum: 1
  };

  @Provide() formData: any = {
    id:"",
    advertisersName:"",
    advertisersKey: "",
    appid:""
  };
  @Provide() searchMap: {
    admin_name: string,
    content:string,
    title:string,
    begin_time:string,
    end_time:string,
  }={
    admin_name:'',
    content:'',
    begin_time:'',
    end_time:'',
  title: ''
  }
  created() {
    let manage:any=localStorage.getItem('manage')
    this.manage=JSON.parse(manage)
    this.loadData();
  }
  loadData() {
    invoiceApi.invoiceApplyList(this.page,this.size)
      .then((res: any) => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
        this.loading=false
      });
  }

  bind(id){
    this.dialogVisible = true;
    invoiceApi.invoiceApplyBind(id).then((res: any) => {
      if(res.data.code !== 200){
        this.$message.error(res.data.msg)
        return false;
      }
      this.bindData = res.data.data;
    })
  }

 makeInvoice(row){
   this.$confirm("确认给【"+row.apply_name+"】开票吗?", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          invoiceApi.invoiceApply({id:row.id,status:2}).then((res: any) => {
            const resp = res.data;
            if(resp.code !== 200){
              this.$message.error(resp.msg);
              return false;
            }

            this.$message.success('操作成功');
            this.loadData()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
   
 }

 confirmInvoice(id){
   this.$confirm("确认收票吗?", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          invoiceApi.invoiceApply({id:id,status:4}).then((res: any) => {
            const resp = res.data;
            if(resp.code !== 200){
              this.$message.error(resp.msg);
              return false;
            }

            this.$message.success('操作成功');
            this.loadData()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
   
 }
 handleShipping(id){
   this.express = {
     company:'',
     express_no:'',
     id:id
   }
   this.dialogShippingVisible = true;
 }

  handleApply(row){
    this.dialogApplyVisible = true;
    this.apply = row;
    this.applyResult = {remark:'',status:'',id:row.id}
  }
  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }

  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }
  handleDetail(row){
    this.dialogDetailVisible = true
    this.form = row
  }
  handleSubmit(){
      invoiceApi.invoiceApply(this.applyResult).then((res: any) => {
        const resp = res.data;
        if(resp.code !== 200){
          this.$message.error(resp.msg);
          return false;
        }

        this.$message.success('操作成功');
        this.dialogApplyVisible = false;
        this.loadData()
      })
  }
  
  handleExpressSubmit()
  {
      invoiceApi.invoiceExpress(this.express).then((res: any) => {
        const resp = res.data;
        if(resp.code !== 200){
          this.$message.error(resp.msg);
          return false;
        }

        this.$message.success('操作成功');
        this.dialogShippingVisible = false;
        this.loadData()
      })
  }

  headClass() {
            return "text-align: center;background:#eef1f6;";
        }

}
</script>

<style lang="scss" scoped>
.el-range-editor.el-input__inner{
  margin-right: 10px
}
.el-button+.el-button {
    margin-top: 10px;
}
.user-info-item {
  font-size: 14px;
  line-height: 30px;
  >span:nth-child(1) {
    display: inline-block;
    width: 100px;
    text-align: right;
  }
  >span:nth-child(2) {
    margin-left: 20px;
  }
}
.el-input {
  width: 90% !important;
}
.but {
  text-align: center;
}
</style>
